<template>
<div class="item">
  <div class="item-img">
    <img :src="goods.stock_info[tabIndex].image" style="opacity: 1;">
  </div>
  <h6>{{goods.stock_info[tabIndex].title}}</h6>
  <h3 >{{goods.stock_info[tabIndex].sub_title}}</h3>
  <div class="params-colors">
    <ul class="colors-list">
      <li v-for="(itm,ind) in goods.stock_info" :key="ind" @click='tabIndex=ind'>
        <a href="javascript:;" class="active" :style="{background:itm.detail.color}"></a>
      </li>
    </ul>
  </div>
  <div class="item-btns clearfix">
            <span class="item-gray-btn">
              <button @click="setDetails(goods.id,tabIndex)">查看详情</button> </span><span class="item-blue-btn" @click="add">加入购物车</span>
  </div>
  <div class="item-price clearfix">
    <i>¥</i><span>{{goods.stock_info[tabIndex].price}}</span>
  </div>
</div>
     
</template>

<script>
import Vue from "vue";
    export default {
        props: {
            goods: {
                type: Object,
                required: true,
            },
        },
        data() {
            return {
                tabIndex: 0
            }
        },
        methods: {
            add() {
                let {goods,tabIndex}=this
                this.$store.commit("shop/goodAdd",goods.stock_info[tabIndex]);
                this.$message({
                  message: '商品添加至购物车！',
                  type: 'success'
                });
            },
          setDetails(id,num){
            this.$router.push({
              path: '/Details',
              query: {
                num,
                id,
              }
            })
          }
        },
    }
</script>

<style lang="less" scoped>
@import url('../assets/css/goodsList.css');
</style>